<template>
	<view class="brand-list">
		<block v-if="show">
			<view class="brand-tabs" v-if="sortList.length">
				<u-tabs
					:list="sortList"
					:current="sortIndex"
					@change="sortTabChange"
					active-color="#141414"
					inactive-color="#666666"
					bg-color="#FFF"
					name="style_name"
					font-size="28">
				</u-tabs>
			</view>
			<view class="brand-list-box" v-if="brandList.length">
				<pt-brand-item :list="brandList"></pt-brand-item>
			</view>
			<pt-loading-more v-if="isLoading"></pt-loading-more>
			<pt-nomore v-if="noMore && brandList.length"></pt-nomore>
			<pt-nothing 
				v-if="noMore && !brandList.length" 
				:text="'暂无品牌'" 
				:isHigh="true" 
				:fixed="true" 
				top="80" 
				icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
			</pt-nothing>
		</block>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				style_id: '',
				sortIndex: 0,
				sortList: [],
				brandList: [],
				page: 0,
				isLoading: false,
				noMore: false
			};
		},
		onLoad() {
			this.init()
		},
		methods: {
			sortTabChange(e){
				this.sortIndex = e
				if(e!=0){
					this.style_id = this.sortList[e].style_id
				}else{
					this.style_id = ''
				}
				uni.pageScrollTo({
					duration: 0,
					scrollTop: 0
				})
				this.page = 0
				this.brandList = []
				this.init()
			},
			init(){
				this.$u.api.FactoryList({page: this.page,style_id: this.style_id}).then(res => {
					this.show = true
					this.isLoading = false
					if(!this.sortList.length){
						this.sortList = res.datas.style_list
					}
					if(res.datas.list.length){
						res.datas.list.forEach(item => {
							this.brandList.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			}
		},
		onReachBottom() {
			if(!this.noMore){
				this.isLoading = true
				this.page++
				this.init()
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F7F7;
	}
	.brand-list{
		padding: 0 30rpx;
	}
	.brand-tabs{
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 10;
	}
	.brand-list-box{
		padding-top: 80rpx;
	}
</style>
